<template>
    <el-container class="register_box">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" show-password/>
            </el-form-item>
            <el-form-item label="重复密码" prop="repass">
                <el-input v-model="ruleForm.repass" type="password" show-password/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"/>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-row>
                    <el-col :span="10">
                        <el-input v-model="ruleForm.code"/>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-image src="/api/captcha"/>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    注册
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {request} from '@/util/request.js'
import {useRouter} from "vue-router";

const formSize = ref('default')
const ruleFormRef = ref()
const router = useRouter()
const ruleForm = reactive({
    username: '',
    password: '',
    repass: '',
    phone: '',
    code: ''
})
// 自定义校验规则
const checkUsername = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    }
    if (!/^[a-zA-Z][a-zA-Z0-9_]{3,9}$/.test(value)) {
        callback(new Error('用户名字母开头，允许4-10字节，允许字母数字下划线'))
    }
    callback()
    // TODO 校验用户名是否被注册
}

const checkPassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    }
    if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) {
        callback(new Error('密码必须包含大小写和数字的组合，长度8-16位'))
    }
    callback()
}

const checkRepass = (rule, value, callback) => {
    if (value !== ruleForm.password) {
        callback(new Error('两次输入密码不一致'))
    }
    callback()
}

const checkPhone = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入手机号'))
    }
    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        callback(new Error('手机号格式不正确'))
    }
    callback()
}
// 应用校验规则
const rules = reactive({
    username: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
        {validator: checkUsername, trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {validator: checkPassword, trigger: 'blur'}
    ],
    repass: [
        {required: true, message: '请再次输入密码', trigger: 'blur'},
        {validator: checkRepass, trigger: 'blur',}
    ],
    phone: [
        {required: true, message: '请输入手机号', trigger: 'blur'},
        {validator: checkPhone, trigger: 'blur'},
    ]
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            request.post('/user/register', ruleForm).then(res => {
                if (res.code === 1) {
                    ElMessage({
                        message: '注册成功',
                        type: 'success',
                    })
                    router.push('/login')
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })

        } else {
            ElMessage({
                message: '注册失败',
                type: 'warning',
            })
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.register_box {
    margin: 0 auto;
    justify-content: center
}
</style>
